<template>
  <section class="wraper">
    <header class="mi-header"></header>
    <div class="mi-middle">
      <nav class="mi-menu"></nav>
      <section class="mi-content"></section>
    </div>
    <footer class="mi-footer"></footer>
  </section>
</template>

<script>

import {Component ,Vue,Prop} from "vue-property-decorator";

@Component
class App extends Vue{
    @Prop() changeComponent;
    created(){
      console.log(this.changeComponent)
    }
}
export default App;
</script>

<style lang="scss" scoped>
.wraper{
  width:100%;
  height: 100%;
  display:flex;
  flex-direction: column;
  .mi-header{
    height: 80px;
    flex-grow: 0;
    background: rgb(31,38,45);
  }
  .mi-middle{
    height: 1%;
    flex-grow: 1;
    display:flex;
    flex-direction: row;
    .mi-menu{
      width:220px;
      height: 100%;
      background:rgb(46,54,63);
      flex-grow: 0;
    }
    .mi-content{
      width:1%;
      height: 100%;
      flex-grow: 1;
      background:rgb(238,238,238);
    }
  }
  .mi-footer{
    height: 80px;
    flex-flow: 0;
    background: rgb(31,38,45);
  }
}

</style>
